<template>
  <div id="VJForm">
    <van-form>
      <template v-for="(item,k) in cfgList">
        <slot name="form-items" v-if="slotIdx&&slotIdx.includes(k)" :idx="k"/>
        <van-cell v-if="isType(item,'select')" :title="item.label" :value="formatter(item,formData)"
                  is-link
                  @click="openPop(item)"/>
        <van-cell v-else-if="isType(item,'radio')" :title="item.label">
          <div style="display: inline-block">
            <van-radio-group v-model="formData[item.name]" direction="horizontal">
              <van-radio :name="op.value" :key="k" v-for="(op,k) in item.cfg.options">{{ op.label }}
              </van-radio>
            </van-radio-group>
          </div>
        </van-cell>
        <van-field
            v-else
            input-align="right"
            :key="k"
            v-bind="item.cfg"
            v-model="formData[item.name]"
            :label="item.label"
            placeholder="请输入"/>
        <slot name="form-after-items" v-if="afterSlotIdx&&afterSlotIdx.includes(k)" :idx="k"/>
      </template>
    </van-form>
    <van-popup position="bottom" v-model="selectPop">
      <van-area title="请选择" v-if="cmp==='area'" @confirm="areaPickerConfirm" :area-list="areaList"/>
      <van-datetime-picker
          v-if="cmp==='date'"
          v-model="currentDate"
          @confirm="datePickerConfirm"
          type="date"
          title="选择年月日"/>
      <van-picker
          v-else
          title="请选择"
          show-toolbar
          :columns="selectColumns"
          value-key="label"
          @confirm="onSelectConfirm"
          @cancel="selectPop=false"/>
    </van-popup>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {Prop, PropSync} from "vue-property-decorator";
import {AREA_LIST} from "@/config/area";
import {defaultProp} from "vijay-util";
import dayjs from "dayjs";

@Component
export default class VJForm extends Vue implements ComponentOptions<Vue> {
  name = "VJForm";
  areaList = AREA_LIST;
  @Prop() slotIdx!: any[];
  @Prop() afterSlotIdx!: any[];
  @Prop() cfgList!: any[];
  @PropSync("form") formData!: any;
  resolve!: Function;
  selectPop = false;
  selectColumns = [];
  cmp = null;
  targetName = null;
  currentDate = new Date();
  isType({type}, target) {
    return type === target;
  }

  formatter({formatter, name}, formData) {
    return typeof formatter === "function" ? formatter(formData) : formData[name]
  }

  async openPop({name, names, cmp, cfg = {options: []}}) {
    this.selectPop = true;
    this.selectColumns = cfg.options;
    this.cmp = cmp;
    this.targetName = name;
    this.currentDate = dayjs(this.formData[name]).toDate();
    const res: any = await new Promise(resolve => this.resolve = resolve);
    if (names) return names.forEach((name, i) => this.formData[name] = res[i]);
    this.formData[name] = res
  }

  areaPickerConfirm(arr) {
    this.resolve(arr.map(({code}) => code));
    this.selectPop = false;
  }

  onSelectConfirm({value}) {
    this.resolve(value);
    this.selectPop = false;
  }
  datePickerConfirm(date){
    this.resolve(dayjs(date).format("YYYY-MM-DD"));
    this.selectPop = false;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#VJForm {
}
</style>
